<template>
  <div class="components-vip">
    <el-form @submit.prevent>
      <div class="btn-row">
        <div
          class="default-btn primary-btn"
          @click="onAddRow"
        >
          {{ $t('user.addLevel') }}
        </div>
      </div>
      <el-form-item>
        <el-table
          :data="dataForm.userLevels"
          header-cell-class-name="table-header"
          row-class-name="table-row"
        >
          <el-table-column
            prop="level"
            fixed
            :label="$t('user.level')"
          />
          <el-table-column
            prop="levelName"
            fixed
            :label="$t('user.levelName')"
          />
          <el-table-column
            prop="img"
            fixed
            :label="$t('user.bgImg')"
          >
            <template #default="scope">
              <img
                v-if="scope.row.img"
                :src="resourcesUrl + scope.row.img"
                width="140"
                height="75"
              >
              <span v-if="!scope.row.img">{{ $t('user.noPic') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="presScore"
            fixed
            :label="$t('user.bonusPoints')"
          />
          <el-table-column
            width="110"
            prop="needAmount"
            :label="$t('user.paidMemberPrice')"
          />
          <el-table-column
            prop="termType"
            :label="$t('user.time')"
          >
            <template #default="scope">
              <span>{{ scope.row.termType === 1? $t('coupon.day') :scope.row.termType === 2? $t('user.week') :scope.row.termType === 3? $t('user.month') :scope.row.termType === 4? $t('user.season') : $t('user.year') }}</span>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            prop="needGrowth"
            :label="$t('user.needGrowth')"
          />
          <el-table-column
            prop="discountRange"
            fixed
            :label="$t('user.memberDiscount')"
          >
            <template #default="scope">
              <span v-if="scope.row.discount === 10">{{ '-' }}</span>
              <span v-else>
                {{ scope.row.term }}
                {{ scope.row.termType === 1? $t('coupon.day') :scope.row.termType === 2? $t('user.week') :scope.row.termType === 3? $t('user.month') :scope.row.termType === 4? $t('user.season') : $t('user.year') }}{{ $t('user.within') }}
                {{ scope.row.discountRange === 1? $t('user.selfShop') : $t('user.platform') }}
                {{ scope.row.discountType === 1? $t('user.someProducts') : $t('user.allProducts') }}
                {{ scope.row.discount }}{{ $t('coupon.off') }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('text.menu')"
            width="150"
            align="center"
          >
            <template #default="scope">
              <div class="text-btn-con">
                <div
                  class="default-btn text-btn"
                  @click.prevent="onAddOrUpdate(scope.$index)"
                >
                  {{ scope.$index+1 > maxLength ? $t('sysManagement.save') : $t('coupon.edit') }}
                </div>
                <div
                  v-if="scope.$index === dataForm.userLevels.length -1 && scope.$index !== 0"
                  class="default-btn text-btn"
                  @click.prevent="onDeleteRow(scope.$index)"
                >
                  {{ $t('user.remove') }}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @close-add-or-up="onCloseAddOrUp"
      @refresh-data-list="onGetData"
    />
  </div>
</template>

<script setup>
import AddOrUpdate from '../add-or-update.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
const userLevel = [
  {
    id: null,
    level: 0,
    levelName: '',
    levelType: 1,
    needGrowth: 0,
    needAmount: 1,
    term: 1,
    termType: 3,
    img: '',
    discount: 10,
    discountRange: 0,
    discountType: 0,
    presScore: 0,
    rateScore: 1,
    isFreeFee: 0,
    couponList: [],
    userRightsIds: [],
    categorys: null
  }
]

// 获取数据
const dataForm = ref({
  parentId: null,
  id: null,
  levelType: 1,
  userLevels: []
})
const maxLength = ref(0)
const onGetData = () => {
  http({
    url: http.adornUrl('/user/userLevel/list'),
    method: 'get',
    params: http.adornParams({
      userLevelType: 1
    })
  }).then(({ data }) => {
    dataForm.value.userLevels = data
    maxLength.value = data.length
  })
}
onMounted(() => {
  onGetData()
})
// 新增 / 修改
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)
const onAddOrUpdate = (index) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(dataForm.value.userLevels, index)
  })
}
// 删除列
const onDeleteRow = (index) => {
  ElMessageBox.confirm($t('seckill.isDeleOper'), $t('text.tips'), {
    confirmButtonText: $t('coupon.confirm'),
    cancelButtonText: $t('coupon.cancel'),
    type: 'warning'
  }).then(() => {
    dataForm.value.id = dataForm.value.userLevels[index].id
    // 删除列并更新数据
    if (dataForm.value.id) {
      http({
        url: http.adornUrl('/user/userLevel'),
        method: 'delete',
        data: http.adornData(dataForm.value)
      }).then(() => {
        ElMessage({
          message: $t('publics.operation'),
          type: 'success',
          duration: 1500
        })
        onGetData()
      }).catch(() => { })
    } else {
      onGetData()
    }
  }).catch(() => { })
}
// 增加列
const onAddRow = () => {
  if (dataForm.value.userLevels.length >= 50) {
    ElMessage({
      message: $t('user.atMost'),
      type: 'warning'
    })
    return
  }
  if (dataForm.value.userLevels.length > maxLength.value) {
    ElMessage({
      message: $t('user.saveFirst'),
      type: 'warning'
    })
    return
  }
  let needGrowth = 0
  if (dataForm.value.userLevels.length > 0 && dataForm.value.userLevels[maxLength.value - 1].needGrowth !== 0) {
    needGrowth = dataForm.value.id = dataForm.value.userLevels[maxLength.value - 1].needGrowth + 1
  }
  const level = JSON.parse(JSON.stringify(userLevel[0]))
  level.levelId = null
  level.level = dataForm.value.userLevels.length + 1
  const levelNum = parseInt(dataForm.value.userLevels.length) + 1
  level.levelName = $t('user.vipLevel') + levelNum
  dataForm.value.userLevels.push(level)
  dataForm.value.userLevels[maxLength.value].needGrowth = needGrowth
  onAddOrUpdate(dataForm.value.userLevels.length - 1)
}
const onCloseAddOrUp = () => {
  addOrUpdateVisible.value = false
}

</script>

<style lang="scss" scoped>
.components-vip {
  .btn-row {
    margin: 5px 0 20px 0;
  }

  :deep(.el-table__fixed) {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
 :deep(.el-table__fixed-right) {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
}

</style>
